<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课表管理系统 - 课表信息展示</title>
    <!-- 引入font awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        /* CSS变量定义-主题颜色 */
        :root {
            /* 主色调 */
            --primary: #4361ee;
            /* 辅助色调 */
            --secondary: #3f37c9;
            /* 成功色调 */
            --success: #4cc9f0;
            /* 错误色调 */
            --danger: #f72585;
            /* 警告色调 */
            --warning: #f8961e;
            /* 浅色 */
            --light: #f8f9fa;
            /* 深色 */
            --dark: #212529;
            /* 边框颜色 */
            --border: #e0e0e0;
            /* 必修课颜色 */
            --mandatory: #4361ee;
            /* 选修课 */
            --elective: #4cc9f0;
            /* 实验课 */
            --lab: #7209b7;
            /* 研讨会 */
            --seminar: #f8961e;

            /* 7.6设置类更新 */
            --text: #333;
            --card-bg: white;
            --control-bg: #f0f4f8;
            --font-size-base: 16px;
            /* 7.6设置类更新 */
        }

        /* 7.6设置类更新 */
        /* 添加深色模式变量  */
        .dark-mode {
            --light: #1e293b;
            --dark: #f8fafc;
            --border: #334155;
            --text: #f1f5f9;
            --card-bg: #334155;
            --control-bg: #1e293b;
            --primary: #4e5dca;
            --secondary: #6a62e0;
        }

        /* 7.6设置类更新 */

        /* 页面整体样式 */
        body {
            /* 7.6设置类更新-注释原有内容 */
            /* background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px; */

            /* 7.6设置类更新 */
            background-color: var(--light);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px;
            font-size: var(--font-size-base);
            transition: all 0.3s ease;
            /* 7.6设置类更新 */

        }

        /* 主容器样式 */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            /* 7.6设置类更新 */
            /* background-color: white; */
            background-color: var(--card-bg);
            /* 7.6设置类更新 */
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        /* 页眉样式 */
        header {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 徽标区域 */
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo h1 {
            font-size: 1.8rem;
            font-weight: 600;
        }

        .logo i {
            font-size: 2rem;
        }

        /* 用户操作按钮 */
        .user-actions {
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 50px;
            border: none;
            /* 7.6 */
            /* background-color: rgba(255, 255, 255, 0.15); */
            background-color: var(--control-bg);
            /* color: white; */
            color: var(--text);
            /* 7.6 */
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 导入按钮 */
        /* 导入选项容器样式 */
        .import-options {
            position: absolute;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 10;
            /* 确保显示在其他元素上方 */
            display: flex;
            flex-direction: column;
            /* 改为纵向排列 */
            gap: 10px;
            /* 垂直间距 */
            min-width: 180px;
            /* 调整宽度 */
            top: 100%;
            left: 0;
            transform: translateX(0);
        }

        /* 导入选项按钮样式 */
        .import-options .btn {
            padding: 10px 15px;
            /* 调整内边距 */
            font-size: 0.9rem;
            border-radius: 4px;
            /* 改为小圆角或0px完全矩形 */
            background-color: white;
            color: var(--dark);
            border: 1px solid var(--border);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: 100%;
            /* 占满容器宽度 */
            justify-content: center;
            /* 按钮内容居中 */
        }

        .import-options .btn:hover {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-1px);
        }

        /* 点击按钮 */
        .btn:hover {
            background-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        /* 控制区域样式 */
        .controls {
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* 7.6设置类更新 */
            /* background-color: white; */
            background-color: var(--card-bg);
            /* 7.6设置类更新 */
            border-bottom: 1px solid var(--border);
        }

        /* 视图切换按钮 */
        .view-toggle {
            display: flex;
            background-color: #f0f4f8;
            border-radius: 50px;
            overflow: hidden;
        }

        .view-toggle button {
            padding: 10px 25px;
            border: none;
            background: transparent;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .view-toggle button.active {
            background-color: var(--primary);
            color: white;
        }

        /* 7.6 */
        body.dark-mode .view-toggle {
            background-color: #333;
            /* 深色背景 */
            color: #ddd;
            /* 浅色文本 */
        }

        body.dark-mode .view-toggle button {
            color: #ddd;
            /* 未激活按钮文字颜色 */
        }

        body.dark-mode .view-toggle button:not(.active):hover {
            background-color: #444;
            /* 悬停时背景颜色 */
        }


        /* 日期导航 */
        .date-navigation {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .date-display {
            font-size: 1.2rem;
            font-weight: 500;
        }

        .nav-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* 7.6 */
        body.dark-mode .nav-btn {
            background: #333;
            border-color: #444;
            color: #ddd;
        }

        body.dark-mode .nav-btn:hover {
            background-color: #555;
            border-color: #666;
            color: white;
        }

        /* 7.6 */
        /* 图例区域-课程类型标识 */
        .legend {
            display: flex;
            gap: 20px;
            padding: 10px 30px;
            /* 7.6设置类更新 */
            background-color: var(--control-bg);
            /* 7.6设置类更新 */
            border-bottom: 1px solid var(--border);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        /* 课程类型颜色定义 */
        .mandatory {
            background-color: var(--mandatory);
        }

        .elective {
            background-color: var(--elective);
        }

        .lab {
            background-color: var(--lab);
        }

        .seminar {
            background-color: var(--seminar);
        }

        /* 课表容器 */
        .schedule-container {
            padding: 20px;
            min-height: 600px;
        }

        /* 周视图布局 */
        .week-view {
            display: grid;
            grid-template-columns: 80px repeat(7, 1fr);
            gap: 12px;
        }

        /* 日视图布局 */
        .day-view {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 12px;
        }

        /* 时间槽样式 */
        .time-slot {
            text-align: center;
            padding: 12px 0;
            font-size: 0.9rem;
            color: #64748b;
            font-weight: 500;
        }

        /* 7.6 */
        body.dark-mode .time-slot {
            color: #b0b7c3;
        }

        /* 7.6 */
        /* 日期头部样式 */
        .day-header {
            text-align: center;
            padding: 15px 0;
            background-color: #f8fafc;
            border-radius: 10px;
            font-weight: 600;
        }

        /* 7.6 */
        body.dark-mode .day-header {
            background-color: #333;
            /* 深灰色背景 */
            color: white;
            /* 白色文字 */
        }

        body.dark-mode .day-header.today {
            background-color: #555;
            /* 更深的灰色或其他突出色 */
            color: white;
        }

        /* 当天特殊样式 */
        .today .day-header {
            background-color: var(--primary);
            color: white;
        }

        /* 课程卡片样式 */
        .course-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-left: 4px solid var(--mandatory);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        /* 课程卡片点击 */
        .course-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        /* 不同类型课程卡片左侧边框颜色区分 */
        .course-card.elective {
            border-left-color: var(--elective);
        }

        .course-card.lab {
            border-left-color: var(--lab);
        }

        .course-card.seminar {
            border-left-color: var(--seminar);
        }

        /* 课程类型标签样式 */
        .course-type {
            position: absolute;
            top: 0;
            right: 0;
            padding: 4px 10px;
            font-size: 0.7rem;
            border-bottom-left-radius: 8px;
            color: white;
        }

        /* 不同类型课程的标签背景色 */
        .mandatory .course-type {
            background-color: var(--mandatory);
        }

        .elective .course-type {
            background-color: var(--elective);
        }

        .lab .course-type {
            background-color: var(--lab);
        }

        .seminar .course-type {
            background-color: var(--seminar);
        }

        /* 课程标题 */
        .course-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        /* 课程信息样式 */
        .course-info {
            font-size: 0.85rem;
            color: #64748b;
            margin-bottom: 3px;
        }

        /* 课程地点样式 */
        .course-location {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            color: #4b5563;
            margin-top: 8px;
        }

        /* 7.6 */
        /* ===== 课程卡片 - 深色模式样式 ===== */
        body.dark-mode .course-card {
            background: #374151;
            /* 深色背景 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            /* 深色阴影 */
            border-left: 4px solid var(--dark-mandatory);
            /* 使用深色变体 */
        }

        body.dark-mode .course-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
            /* 悬停时更深的阴影 */
        }

        /* 不同类型课程卡片左侧边框颜色 - 深色变体 */
        body.dark-mode .course-card.elective {
            border-left-color: var(--dark-elective);
        }

        body.dark-mode .course-card.lab {
            border-left-color: var(--dark-lab);
        }

        body.dark-mode .course-card.seminar {
            border-left-color: var(--dark-seminar);
        }

        /* 课程标题 - 深色模式 */
        body.dark-mode .course-title {
            color: #f8fafc;
            /* 白色文字 */
        }

        /* 课程信息 - 深色模式 */
        body.dark-mode .course-info {
            color: #cbd5e0;
            /* 浅灰色文字 */
        }

        /* 课程地点 - 深色模式 */
        body.dark-mode .course-location {
            color: #e2e8f0;
            /* 稍亮的浅灰色 */
        }

        /* 课程类型标签 - 深色模式 */
        body.dark-mode .course-type {
            opacity: 0.9;
            /* 降低透明度，避免过于刺眼 */
        }

        /* 7.6 */

        /* 空课程时段 */
        .empty-slot {
            /* 7.6 */
            /* background-color: #f8fafc;
            border: 1px dashed #e2e8f0; */
            background-color: var(--control-bg);
            border: 1px dashed var(--border);
            /* 7.6 */
            border-radius: 8px;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 0.9rem;
        }

        /* 日视图时间列样式 */
        .day-view .time-column {
            display: grid;
            grid-template-rows: repeat(10, 1fr);
            gap: 12px;
        }

        /* 日视图课程列样式 */
        .day-view .courses-column {
            display: grid;
            grid-template-rows: repeat(10, 1fr);
            gap: 12px;
        }

        /* 隐藏元素通用类 */
        .hidden {
            display: none;
        }

        /* 当前时间高亮样式 */
        .current-time {
            background-color: rgba(67, 97, 238, 0.1);
            border: 1px solid var(--primary);
        }

        /* 页脚样式 */
        footer {
            text-align: center;
            padding: 20px;
            color: #64748b;
            font-size: 0.9rem;
            border-top: 1px solid var(--border);
        }

        /* 关键帧动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .day-header {
            animation: fadeIn 0.4s ease-out;
        }


        /* 日视图顶部信息 */
        .day-view-top {
            grid-column: 1 / span 2;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
            /* animation: fadeInDown 0.6s ease-out; */
        }

        .day-view-top .weekday {
            font-size: 1.8rem;
            font-weight: 700;
            margin-right: 15px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .day-view-top .date {
            font-size: 1.2rem;
            font-weight: 500;
            background: rgba(255, 255, 255, 0.15);
            padding: 8px 15px;
            border-radius: 50px;
        }

        .day-view-top {
            animation: fadeIn 0.4s ease-out;
        }

        /* ===== 查询表单样式 ===== */
        .query-form {
            padding: 20px 30px;
            /* 7.6 */
            /* background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%); */
            background: linear-gradient(135deg, var(--control-bg) 0%, var(--card-bg) 100%);
            /* 7.6 */
            border-bottom: 1px solid var(--border);
        }

        .query-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
            color: var(--secondary);
        }

        .query-title i {
            font-size: 1.5rem;
        }

        .query-title h2 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .form-group {
            flex: 1;
            min-width: 250px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4b5563;
        }

        .form-select,
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            /* 7.6 */
            /* border: 1px solid #d1d5db;            
            background-color: #f9fafb; */
            background-color: var(--control-bg);
            color: var(--text);
            border: 1px solid var(--border);
            /* 7.6 */
        }

        .form-select:focus,
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
            /* 7.6 */
            /* background-color: white; */
            background-color: var(--control-bg);
            /* 7.6 */
        }

        .query-button {
            padding: 12px 30px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 500;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(67, 97, 238, 0.3);
        }

        .query-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(67, 97, 238, 0.4);
        }

        /* 7.6 */
        body.dark-mode .query-form {
            background: linear-gradient(135deg, #333842 0%, #2c313a 100%);
            /* 浅灰色渐变背景 */
            border-bottom: 1px solid #444a55;
        }

        body.dark-mode .query-title,
        body.dark-mode .form-label {
            color: #e2e8f0;
            /* 白色字体 */
        }

        body.dark-mode .form-select,
        body.dark-mode .form-input {
            background-color: #3a4149;
            /* 浅灰色背景 */
            color: #f8fafc;
            /* 白色字体 */
            border: 1px solid #4b5563;
        }

        body.dark-mode .form-select:focus,
        body.dark-mode .form-input:focus {
            background-color: #47505a;
            /* 聚焦时稍亮的背景 */
            color: #ffffff;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
        }

        body.dark-mode .form-select:focus,
        body.dark-mode .form-input:-webkit-autofill {
            transition: background-color 5000s ease-in-out 0s;
            color: #9cc5ec;
        }

        body.dark-mode .form-select:focus,
        body.dark-mode .form-input {
            -webkit-text-fill-color: #ffffff;
        }

        /* ===== 查询结果区域 ===== */
        .results-section {
            padding: 20px;
            background-color: white;
            border-radius: 12px;
            margin: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            display: none;
            /* 初始隐藏 */
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border);
        }

        .results-title {
            font-size: 1.4rem;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close-results {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--danger);
            cursor: pointer;
            padding: 5px;
        }

        .results-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .result-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-left: 4px solid var(--mandatory);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .result-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }

        .result-card.elective {
            border-left-color: var(--elective);
        }

        .result-card.lab {
            border-left-color: var(--lab);
        }

        .result-card.seminar {
            border-left-color: var(--seminar);
        }

        .result-card .course-type {
            position: absolute;
            top: 0;
            right: 0;
            padding: 4px 10px;
            font-size: 0.7rem;
            border-bottom-left-radius: 8px;
            color: white;
        }

        .mandatory .course-type {
            background-color: var(--mandatory);
        }

        .elective .course-type {
            background-color: var(--elective);
        }

        .lab .course-type {
            background-color: var(--lab);
        }

        .seminar .course-type {
            background-color: var(--seminar);
        }

        .result-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--dark);
        }

        .result-info {
            font-size: 0.9rem;
            color: #64748b;
            margin-bottom: 8px;
            display: flex;
            gap: 10px;
        }

        .result-info i {
            min-width: 20px;
        }

        .empty-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px;
            color: #64748b;
        }

        .empty-results i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #d1d5db;
        }

        .empty-results h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }


        /* 7.6 */
        /* 查询结果深色模式 */
        body.dark-mode .results-section {
            background-color: #2d3748;
            /* 深灰色背景 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            /* 深色模式下更深的阴影 */
        }

        body.dark-mode .results-header {
            border-bottom: 1px solid #4a5568;
        }

        body.dark-mode .results-title {
            color: #e2e8f0;
        }

        body.dark-mode .close-results {
            color: #f78da7;
        }

        body.dark-mode .result-card {
            background: #374151;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        body.dark-mode .result-card:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .result-title {
            color: #f7fafc;
        }

        body.dark-mode .result-info {
            color: #cbd5e0;
        }

        body.dark-mode .empty-results {
            color: #a0aec0;
        }

        body.dark-mode .empty-results i {
            color: #4a5568;
        }

        body.dark-mode .empty-results h3 {
            color: #e2e8f0;
        }

        /* 响应式布局 - 移动端适配 */
        @media (max-width: 768px) {

            /* 全局样式调整 */
            :root {
                --font-size-base: 14px;
            }

            body {
                padding: 10px;
            }

            .container {
                border-radius: 0;
                box-shadow: none;
            }

            /* 页眉区域调整 */
            header {
                padding: 15px;
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .logo {
                gap: 10px;
            }

            .logo h1 {
                font-size: 1.5rem;
            }

            .logo i {
                font-size: 1.8rem;
            }

            .user-actions {
                width: 100%;
                justify-content: space-between;
                gap: 0;
            }

            .btn {
                padding: 8px 15px;
                font-size: 0.9rem;
            }

            /* 查询表单调整 */
            .query-form {
                padding: 15px;
            }

            .form-row {
                flex-direction: column;
                gap: 10px;
            }

            .form-group {
                min-width: 100%;
            }

            .query-button {
                padding: 10px 20px;
            }

            /* 控制区域调整 */
            .controls {
                padding: 15px;
                flex-direction: column;
                gap: 15px;
            }

            .view-toggle {
                width: 100%;
                border-radius: 8px;
            }

            .view-toggle button {
                flex: 1;
                padding: 10px;
                font-size: 0.9rem;
            }

            .date-navigation {
                width: 100%;
                justify-content: space-between;
            }

            .date-display {
                font-size: 1rem;
            }

            .nav-btn {
                width: 32px;
                height: 32px;
            }

            /* 图例区域调整 */
            .legend {
                padding: 10px 15px;
                gap: 15px;
                overflow-x: auto;
                white-space: nowrap;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

            .legend::-webkit-scrollbar {
                display: none;
            }

            .legend-item {
                font-size: 0.8rem;
            }

            /* 课表内容区域调整 */
            .schedule-container {
                padding: 10px;
            }

            /* 周视图调整 */
            .week-view {
                grid-template-columns: 60px repeat(7, 1fr);
                gap: 8px;
            }

            .time-slot {
                font-size: 0.8rem;
                padding: 8px 0;
            }

            .day-header {
                padding: 10px 0;
                font-size: 0.8rem;
                border-radius: 6px;
            }

            .course-card {
                padding: 10px;
                font-size: 0.85rem;
                border-radius: 8px;
            }

            .course-title {
                font-size: 1rem;
            }

            .course-info,
            .course-location {
                font-size: 0.75rem;
            }

            .empty-slot {
                font-size: 0.75rem;
                min-height: 80px;
            }

            /* 日视图调整 */
            .day-view-top {
                padding: 12px;
                flex-direction: column;
                gap: 10px;
            }

            .day-view-top .weekday {
                font-size: 1.5rem;
            }

            .day-view-top .date {
                font-size: 1rem;
                padding: 6px 12px;
            }

            .time-column,
            .courses-column {
                gap: 8px;
            }

            /* 页脚调整 */
            footer {
                padding: 15px;
                font-size: 0.8rem;
            }
        }

        /* 超小屏幕适配 (手机竖屏) */
        @media (max-width: 480px) {
            .week-view {
                grid-template-columns: 50px repeat(7, 1fr);
            }

            .time-slot {
                font-size: 0.7rem;
            }

            .day-header {
                font-size: 0.7rem;
            }

            .course-card {
                padding: 8px;
            }

            .course-title {
                font-size: 0.9rem;
            }

            .user-actions .btn {
                padding: 6px 12px;
                font-size: 0.8rem;
            }
        }
        /* 7.7 */
        /* 确保深色模式下文字清晰可读 */
        body.dark-mode {
            color: #f8fafc; /* 深色模式文字颜色 */
        }

        /* 课表容器添加半透明背景，避免被图片干扰 */
        .container {
            background-color: rgba(255, 255, 255, 0.85); /* 浅色模式容器背景 */
        }

        body.dark-mode .container {
            background-color: rgba(30, 41, 59, 0.85); /* 深色模式容器背景 */
        }
        /* 7.7 */

        /* 平板手机设备
        @media (max-width: 992px) {
            .week-view {
                grid-template-columns: 60px repeat(7, 1fr);
            }
            
            .day-header {
                font-size: 0.9rem;
            }
            
            .course-card {
                padding: 10px;
            }
            
            .course-title {
                font-size: 1rem;
            }
        }

        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                gap: 15px;
            }
            
            .view-toggle {
                width: 100%;
            }
            
            .view-toggle button {
                flex: 1;
                padding: 10px;
            }
            
            .week-view {
                display: none;
            }
            
            .mobile-day-selector {
                display: flex;
                overflow-x: auto;
                gap: 10px;
                padding: 10px 0;
                margin-bottom: 15px;
            }
            
            .mobile-day {
                min-width: 80px;
                padding: 10px;
                text-align: center;
                border-radius: 10px;
                background-color: #f0f4f8;
                cursor: pointer;
            }
            
            .mobile-day.active {
                background-color: var(--primary);
                color: white;
            }
        }

        @media (min-width: 769px) {
            .mobile-day-selector {
                display: none;
            }
        } */
    </style>
</head>

<body>
    <div class="container">
        <!-- 页眉区域 -->
        <header>
            <div class="logo">
                <!-- 添加图标 -->
                <i class="fas fa-calendar-alt"></i>
                <h1>课表信息</h1>
            </div>
            <div class="user-actions">
                <button class="btn" onclick="window.location.reload()"><i class="fas fa-sync-alt"></i> 刷新</button>
                <!-- 7.6设置类更新 -->
                <button class="btn" onclick="window.location.href='settings_view.html'"><i class="fas fa-cog"></i>
                    设置</button>
                <!-- 7.6设置类更新 -->
                <button class="btn" id="importBtn"><i class="fas fa-file-import"></i> 导入</button>
                <button class="btn" onclick="window.location.href='user\\dashboard.html'"><i class="fas fa-user"></i>
                    学生信息</button>
            </div>
            <!-- 导入选项 -->
            <div class="import-options hidden">
                <button class="btn" id="excel_import" style="margin-right: 10px;">
                    <i class="fas fa-file-excel"></i> Excel导入
                </button>
                <input type="file" id="excelFileInput" class="hidden" accept=".xlsx,.xls">
                <button class="btn" id="hand_import">
                    <i class="fas fa-file-text"></i> 手动输入导入
                </button>
            </div>
        </header>
        <!-- 查询表单 -->
        <div class="query-form">
            <div class="query-title">
                <i class="fas fa-search"></i>
                <h2>课程查询</h2>
            </div>

            <div class="form-row">
                <!-- 下拉选择框：选择查询类型 -->
                <div class="form-group">
                    <label class="form-label">查询类型</label>
                    <select id="queryType" class="form-select">
                        <option value="">请选择查询条件</option>
                        <option value="name">课程名称</option>
                        <option value="teacher">教师姓名</option>
                    </select>
                </div>

                <!-- 输入框：输入查询关键词 -->
                <div class="form-group">
                    <label class="form-label">查询关键词</label>
                    <input type="text" id="keyword" placeholder="请输入关键词" class="form-input">
                </div>

                <!-- 查询按钮 -->
                <div class="form-group" style="align-self: flex-end;">
                    <button id="queryBtn" class="query-button">
                        <i class="fa fa-search"></i>
                        <span>查询</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 查询结果区域 -->
        <div class="results-section" id="resultsSection">
            <div class="results-header">
                <h3 class="results-title">
                    <i class="fas fa-list-alt"></i> 查询结果
                </h3>
                <button class="close-results" id="closeResults">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="results-container" id="resultsContainer">
                <!-- 结果将通过JS动态添加 -->
            </div>
        </div>

        <!-- 控制区域 -->
        <div class="controls">
            <div class="view-toggle">
                <button id="weekViewBtn" class="active">周视图</button>
                <button id="dayViewBtn">日视图</button>
            </div>
            <div class="date-navigation">
                <div class="nav-btn" id="prevBtn"><i class="fas fa-chevron-left"></i></div>
                <div class="date-display" id="dateDisplay">2023年10月16日 - 10月22日</div>
                <div class="nav-btn" id="nextBtn"><i class="fas fa-chevron-right"></i></div>
            </div>
        </div>
        <!-- 课程类型图例 -->
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color mandatory"></div>
                <span>必修课</span>
            </div>
            <div class="legend-item">
                <div class="legend-color elective"></div>
                <span>选修课</span>
            </div>
            <div class="legend-item">
                <div class="legend-color lab"></div>
                <span>实验课</span>
            </div>
            <div class="legend-item">
                <div class="legend-color seminar"></div>
                <span>研讨会</span>
            </div>
        </div>
        <!-- 移动端日期选择器
        <div class="mobile-day-selector">
            <div class="mobile-day active" data-day="0">周一</div>
            <div class="mobile-day" data-day="1">周二</div>
            <div class="mobile-day" data-day="2">周三</div>
            <div class="mobile-day" data-day="3">周四</div>
            <div class="mobile-day" data-day="4">周五</div>
            <div class="mobile-day" data-day="5">周六</div>
            <div class="mobile-day" data-day="6">周日</div>
        </div> -->
        <!-- 课表内容区域 -->
        <div class="schedule-container">
            <!-- 周视图 -->
            <div id="weekView">
                <div class="week-view">
                    <!-- 时间列 -->
                    <div class="time-slot"></div> <!-- 空的时间槽，第一列 -->
                    <div class="day-header">周一<br><span class="date-text">--/--</span></div>
                    <div class="day-header">周二<br><span class="date-text">--/--</span></div>
                    <div class="day-header today">周三<br><span class="date-text">--/--</span></div>
                    <div class="day-header">周四<br><span class="date-text">--/--</span></div>
                    <div class="day-header">周五<br><span class="date-text">--/--</span></div>
                    <div class="day-header">周六<br><span class="date-text">--/--</span></div>
                    <div class="day-header">周日<br><span class="date-text">--/--</span></div>

                    <!-- 时间槽 -->
                    <div class="time-slot">8:00</div>
                    <div class="day-column" data-day="0" data-time="0"></div>
                    <div class="day-column" data-day="1" data-time="0"></div>
                    <div class="day-column" data-day="2" data-time="0"></div>
                    <div class="day-column" data-day="3" data-time="0"></div>
                    <div class="day-column" data-day="4" data-time="0"></div>
                    <div class="day-column" data-day="5" data-time="0"></div>
                    <div class="day-column" data-day="6" data-time="0"></div>
                    <!-- 重复时间槽结构 -->
                    <div class="time-slot">8:55</div>
                    <div class="day-column" data-day="0" data-time="1"></div>
                    <div class="day-column" data-day="1" data-time="1"></div>
                    <div class="day-column" data-day="2" data-time="1"></div>
                    <div class="day-column" data-day="3" data-time="1"></div>
                    <div class="day-column" data-day="4" data-time="1"></div>
                    <div class="day-column" data-day="5" data-time="1"></div>
                    <div class="day-column" data-day="6" data-time="1"></div>

                    <div class="time-slot">10:10</div>
                    <div class="day-column" data-day="0" data-time="2"></div>
                    <div class="day-column" data-day="1" data-time="2"></div>
                    <div class="day-column" data-day="2" data-time="2"></div>
                    <div class="day-column" data-day="3" data-time="2"></div>
                    <div class="day-column" data-day="4" data-time="2"></div>
                    <div class="day-column" data-day="5" data-time="2"></div>
                    <div class="day-column" data-day="6" data-time="2"></div>

                    <div class="time-slot">11:05</div>
                    <div class="day-column" data-day="0" data-time="3"></div>
                    <div class="day-column" data-day="1" data-time="3"></div>
                    <div class="day-column" data-day="2" data-time="3"></div>
                    <div class="day-column" data-day="3" data-time="3"></div>
                    <div class="day-column" data-day="4" data-time="3"></div>
                    <div class="day-column" data-day="5" data-time="3"></div>
                    <div class="day-column" data-day="6" data-time="3"></div>

                    <div class="time-slot">14:30</div>
                    <div class="day-column" data-day="0" data-time="4"></div>
                    <div class="day-column" data-day="1" data-time="4"></div>
                    <div class="day-column" data-day="2" data-time="4"></div>
                    <div class="day-column" data-day="3" data-time="4"></div>
                    <div class="day-column" data-day="4" data-time="4"></div>
                    <div class="day-column" data-day="5" data-time="4"></div>
                    <div class="day-column" data-day="6" data-time="4"></div>

                    <div class="time-slot">15:25</div>
                    <div class="day-column" data-day="0" data-time="5"></div>
                    <div class="day-column" data-day="1" data-time="5"></div>
                    <div class="day-column" data-day="2" data-time="5"></div>
                    <div class="day-column" data-day="3" data-time="5"></div>
                    <div class="day-column" data-day="4" data-time="5"></div>
                    <div class="day-column" data-day="5" data-time="5"></div>
                    <div class="day-column" data-day="6" data-time="5"></div>

                    <div class="time-slot">16:40</div>
                    <div class="day-column" data-day="0" data-time="6"></div>
                    <div class="day-column" data-day="1" data-time="6"></div>
                    <div class="day-column" data-day="2" data-time="6"></div>
                    <div class="day-column" data-day="3" data-time="6"></div>
                    <div class="day-column" data-day="4" data-time="6"></div>
                    <div class="day-column" data-day="5" data-time="6"></div>
                    <div class="day-column" data-day="6" data-time="6"></div>

                    <div class="time-slot">17:35</div>
                    <div class="day-column" data-day="0" data-time="7"></div>
                    <div class="day-column" data-day="1" data-time="7"></div>
                    <div class="day-column" data-day="2" data-time="7"></div>
                    <div class="day-column" data-day="3" data-time="7"></div>
                    <div class="day-column" data-day="4" data-time="7"></div>
                    <div class="day-column" data-day="5" data-time="7"></div>
                    <div class="day-column" data-day="6" data-time="7"></div>

                    <div class="time-slot">19:10</div>
                    <div class="day-column" data-day="0" data-time="8"></div>
                    <div class="day-column" data-day="1" data-time="8"></div>
                    <div class="day-column" data-day="2" data-time="8"></div>
                    <div class="day-column" data-day="3" data-time="8"></div>
                    <div class="day-column" data-day="4" data-time="8"></div>
                    <div class="day-column" data-day="5" data-time="8"></div>
                    <div class="day-column" data-day="6" data-time="8"></div>

                    <div class="time-slot">20:05</div>
                    <div class="day-column" data-day="0" data-time="9"></div>
                    <div class="day-column" data-day="1" data-time="9"></div>
                    <div class="day-column" data-day="2" data-time="9"></div>
                    <div class="day-column" data-day="3" data-time="9"></div>
                    <div class="day-column" data-day="4" data-time="9"></div>
                    <div class="day-column" data-day="5" data-time="9"></div>
                    <div class="day-column" data-day="6" data-time="9"></div>

                    <div class="time-slot">21:00</div>
                    <div class="day-column" data-day="0" data-time="10"></div>
                    <div class="day-column" data-day="1" data-time="10"></div>
                    <div class="day-column" data-day="2" data-time="10"></div>
                    <div class="day-column" data-day="3" data-time="10"></div>
                    <div class="day-column" data-day="4" data-time="10"></div>
                    <div class="day-column" data-day="5" data-time="10"></div>
                    <div class="day-column" data-day="6" data-time="10"></div>
                </div>
            </div>

            <!-- 日视图 -->
            <div id="dayView" class="hidden">
                <div class="day-view">
                    <div class="day-view-top">
                        <div class="weekday" id="currentWeekday">周三</div>
                        <div class="date" id="currentFullDate">2025年7月9日</div>
                    </div>
                    <!-- 时间列 -->
                    <div class="time-column">
                        <div class="time-slot">8:00</div>
                        <div class="time-slot">8:55</div>
                        <div class="time-slot">10:10</div>
                        <div class="time-slot">11:05</div>
                        <div class="time-slot">14:30</div>
                        <div class="time-slot">15:25</div>
                        <div class="time-slot">16:40</div>
                        <div class="time-slot">17:35</div>
                        <div class="time-slot">19:10</div>
                        <div class="time-slot">20:05</div>
                        <div class="time-slot">21:00</div>
                    </div>
                    <!-- 课程列 -->
                    <div class="courses-column">
                        <div class="course-slot" data-time="8:00"></div>
                        <div class="course-slot" data-time="8:55"></div>
                        <div class="course-slot" data-time="10:10"></div>
                        <div class="course-slot" data-time="11:05"></div>
                        <div class="course-slot" data-time="14:30"></div>
                        <div class="course-slot" data-time="15:25"></div>
                        <div class="course-slot" data-time="16:40"></div>
                        <div class="course-slot" data-time="17:35"></div>
                        <div class="course-slot" data-time="19:10"></div>
                        <div class="course-slot" data-time="20:05"></div>
                        <div class="course-slot" data-time="21:00"></div>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <p>课表管理系统 &copy; 2025 | 课表展示模块</p>
        </footer>
    </div>

    <script>
        let courses = []; // 空数组，从后端加载
        //静态时间槽
        const timeSlots = [
            { start: "8:00", end: "8:45" },
            { start: "8:55", end: "9:40" },
            { start: "10:10", end: "10:55" },
            { start: "11:05", end: "11:50" },
            { start: "14:30", end: "15:15" },
            { start: "15:25", end: "16:10" },
            { start: "16:40", end: "17:25" },
            { start: "17:35", end: "18:20" },
            { start: "19:10", end: "19:55" },
            { start: "20:05", end: "20:50" }
        ];
        // DOM元素
        const weekViewBtn = document.getElementById('weekViewBtn');//周视图按钮
        const dayViewBtn = document.getElementById('dayViewBtn');//日视图按钮
        const weekView = document.getElementById('weekView');//周视图页面
        const dayView = document.getElementById('dayView');//日视图页面
        const prevBtn = document.getElementById('prevBtn');//前一项按钮
        const nextBtn = document.getElementById('nextBtn');//后一项按钮
        const importBtn = document.getElementById('importBtn');
        const dateDisplay = document.getElementById('dateDisplay');
        const dayHeaders = document.querySelectorAll('.day-header');
        const importOptions = document.querySelector('.import-options');
        // DOM元素 - 移动端
        const mobileDaySelector = document.querySelector('.mobile-day-selector');
        const mobileDays = document.querySelectorAll('.mobile-day');

        // 查询相关DOM元素
        const queryBtn = document.getElementById('queryBtn');
        const queryType = document.getElementById('queryType');
        const keywordInput = document.getElementById('keyword');
        const resultsSection = document.getElementById('resultsSection');
        const resultsContainer = document.getElementById('resultsContainer');
        const closeResults = document.getElementById('closeResults');
        // // 日期头部元素
        // const mondayEl = document.getElementById('monday');
        // const tuesdayEl = document.getElementById('tuesday');
        // const wednesdayEl = document.getElementById('wednesday');
        // const thursdayEl = document.getElementById('thursday');
        // const fridayEl = document.getElementById('friday');
        // const saturdayEl = document.getElementById('saturday');
        // const sundayEl = document.getElementById('sunday');

        // 当前日期状态
        let currentDate = new Date();//当前显示日期
        let currentView = 'week'; // 'week' or 'day'//当前视图模式，默认周视图
        let currentDay = 2; // 当前选中的日（0-6，周一到周日）

        // 7.6  应用保存的设置
        function applySettings() {
            const savedSettings = localStorage.getItem('scheduleSettings');
            if (savedSettings) {
                const settings = JSON.parse(savedSettings);

                // 应用字体大小设置
                document.documentElement.style.setProperty('--font-size-base', `${settings.fontSize}px`);

                // 应用主题设置
                if (settings.darkMode) {
                    document.body.classList.add('dark-mode');
                } else {
                    document.body.classList.remove('dark-mode');
                }
            }
        }
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            applySettings();
            fetchCourses();
            updateDateDisplay();
            initQueryFunction();

            // 检查屏幕尺寸，显示合适的日期选择器
            checkScreenSize();
            window.addEventListener('resize', checkScreenSize);
        });

        // 检查屏幕尺寸，显示对应的日期选择器
        function checkScreenSize() {
            const mobileDaySelector = document.querySelector('.mobile-day-selector');
            const weekView = document.getElementById('weekView');

            if (window.innerWidth <= 768) {
                mobileDaySelector.classList.remove('hidden');
                weekView.style.marginTop = '50px'; // 为选择器留出空间

                // 高亮当前选中的日期
                const today = new Date().getDay() - 1; // 转换为0-6（周一到周日）
                mobileDays[today].classList.add('active');
            } else {
                mobileDaySelector.classList.add('hidden');
                weekView.style.marginTop = '0';
            }
        }

        // 移动端日期选择
        mobileDays.forEach(day => {
            day.addEventListener('click', () => {
                document.querySelector('.mobile-day.active').classList.remove('active');
                day.classList.add('active');
                currentDay = parseInt(day.getAttribute('data-day'));
                renderWeekView();
            });
        });

        // 新增：从后端获取课程数据
        function fetchCourses() {
            fetch('/api/courses')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    // 转换后端数据格式为前端所需格式
                    courses = data.map(course => {
                        // 1. 处理星期（周一=0，周日=6）
                        const dayMap = {
                            '周一': 0, '周二': 1, '周三': 2, '周四': 3,
                            '周五': 4, '周六': 5, '周日': 6
                        };
                        // 从time中提取星期（如"周一3-4节"中的"周一"）
                        const dayText = course.time.match(/周[一二三四五六日]/)[0];
                        const day = dayMap[dayText];

                        // 2. 定义每节课的开始时间（索引0对应第1节，索引9对应第10节）
                        const periodStartTimes = [
                            '8:00',  // 第1节
                            '8:55',  // 第2节
                            '10:10', // 第3节
                            '11:05', // 第4节
                            '14:30', // 第5节
                            '15:25', // 第6节
                            '16:40', // 第7节
                            '17:35', // 第8节
                            '19:10', // 第9节
                            '20:05'  // 第10节
                        ];

                        // 3. 从time中提取节次范围（如"周一3-4节"中的"3-4"）
                        const periodRange = course.time.match(/(\d+)-(\d+)节/);
                        const startPeriod = parseInt(periodRange[1]); // 开始节次（如3）
                        const endPeriod = parseInt(periodRange[2]);   // 结束节次（如4）

                        // 4. 计算开始时间（节次-1对应数组索引）
                        const start = periodStartTimes[startPeriod - 1];

                        // 5. 计算结束时间（开始时间+45分钟）
                        // 辅助函数：解析时间字符串为分钟数（如"8:00" → 480分钟）
                        const timeToMinutes = (timeStr) => {
                            const [hours, minutes] = timeStr.split(':').map(Number);
                            return hours * 60 + minutes;
                        };
                        // 辅助函数：将分钟数转换为时间字符串（如525 → "8:45"）
                        const minutesToTime = (minutes) => {
                            const hours = Math.floor(minutes / 60);
                            const mins = minutes % 60;
                            return `${hours}:${mins.toString().padStart(2, '0')}`;
                        };
                        // 结束时间 = 结束节次的开始时间 + 45分钟
                        const endTimeMinutes = timeToMinutes(periodStartTimes[endPeriod - 1]) + 45;
                        const end = minutesToTime(endTimeMinutes);

                        return {
                            id: course.id,
                            title: course.name,  // 后端字段为name，对应前端title
                            type: course.type,
                            day: day,
                            start: start,
                            end: end,
                            location: course.location,
                            teacher: course.teacher
                        };
                    });
                    // 数据加载完成后渲染视图
                    renderWeekView();
                    renderDayView();
                    highlightCurrentTime();
                })
                .catch(error => {
                    console.error('获取课程数据失败:', error);
                    showErrorToast('加载课程失败，请刷新页面重试');
                });
        }

        importBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            // 切换显示状态
            importOptions.classList.toggle('hidden');

            if (!importOptions.classList.contains('hidden')) {
                // 获取按钮位置
                const rect = importBtn.getBoundingClientRect();
                const containerRect = document.querySelector('.container').getBoundingClientRect();

                // 计算并设置位置（按钮正下方）
                importOptions.style.top = (rect.top - containerRect.top + rect.height + 25) + 'px';
                importOptions.style.left = (rect.left - containerRect.left) + 'px';
                importOptions.style.width = rect.width + 'px'; // 新增：设置宽度与按钮一致
            }
        });   //点击其它区域的时候关闭
        document.addEventListener('click', function () {
            importOptions.classList.add('hidden');
        });

        importOptions.addEventListener('click', function (e) {
            e.stopPropagation();
        });
        // 课程表单相关变量
        let courseFormModal = null;
        let currentEditingCourseId = null;
        const handImportBtn = document.getElementById('hand_import');
        const excelImportBtn = document.getElementById('excel_import');
        const excelFileInput = document.getElementById('excelFileInput');
        handImportBtn.addEventListener('click', openCourseInputForm);
        initCourseFormModal();

        if (excelImportBtn && excelFileInput) {
            // 点击按钮触发文件选择框
            excelImportBtn.addEventListener('click', function () {
                excelFileInput.click();
            });

            // 监听文件选择变化
            excelFileInput.addEventListener('change', function (e) {
                handleExcelFileSelection(e);
            });
        } else {
            console.warn('未找到excel_import按钮或文件输入框');
        }

        // 处理文件选择并调用后端接口
        function handleExcelFileSelection(e) {
            const file = e.target.files[0];
            if (!file) {
                console.log('未选择文件');
                return;
            }

            // 验证文件类型
            const fileName = file.name.toLowerCase();
            if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
                alert('请选择Excel文件（.xlsx或.xls格式）');
                // 清空选择，避免重复处理
                excelFileInput.value = '';
                return;
            }

            // 创建FormData对象，用于传递文件和参数
            const formData = new FormData();
            // 添加文件参数，对应后端@RequestParam("file")
            formData.append('file', file);

            // // 获取当前登录用户ID（之后根据用户管理那边的
            // if (userId) {
            //     // 添加用户ID参数，对应后端@RequestParam("userId")
            //     formData.append('userId', userId);
            // }

            // 显示加载状态
            excelImportBtn.disabled = true;
            excelImportBtn.textContent = '导入中...';

            // 调用后端接口
            fetch('/api/course/import', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('导入失败，状态码: ' + response.status);
                    }
                    return response.text();
                })
                .then(message => {
                    alert(message); // 显示导入成功提示
                    // 导入成功后刷新课程列表
                    fetchCourses();
                    // 重置文件选择框和按钮状态
                    excelFileInput.value = '';
                    excelImportBtn.disabled = false;
                    excelImportBtn.textContent = '导入Excel';
                })
                .catch(error => {
                    console.error('导入出错:', error);
                    alert('导入失败，请重试');
                    // 恢复按钮状态
                    excelImportBtn.disabled = false;
                    excelImportBtn.textContent = '导入Excel';
                });
        }

        // 初始化课程表单模态框
        function initCourseFormModal() {
            // 检查模态框是否已存在
            if (document.getElementById('courseFormModal')) return;

            // 创建模态框容器
            courseFormModal = document.createElement('div');
            courseFormModal.id = 'courseFormModal';
            courseFormModal.style.cssText = `
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
    `;

            // 创建表单内容容器
            const formContainer = document.createElement('div');
            formContainer.style.cssText = `
        background-color: white;
        padding: 30px;
        border-radius: 12px;
        width: 500px;
        max-width: 90%;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
        animation: fadeIn 0.3s ease;
    `;

            // 表单HTML内容
            formContainer.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px;">
            <h3 style="margin: 0; color: var(--dark);">添加新课程</h3>
            <button id="closeModal" style="background: none; border: none; font-size: 1.5rem; color: #64748b; cursor: pointer;">&times;</button>
        </div>
        <form id="courseForm" style="margin-top: 10px;">
            <div class="form-group" style="margin-bottom: 15px;">
                <label for="courseTitle" style="display: block; margin-bottom: 8px; font-weight: 500; color: #4b5563;">课程名称 <span style="color: var(--danger);">*</span></label>
                <input type="text" id="courseTitle" name="courseTitle" required 
                       style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s;">
            </div>
            
            <div class="form-group" style="margin-bottom: 15px;">
                <label for="teacherName" style="display: block; margin-bottom: 8px; font-weight: 500; color: #4b5563;">教师名称 <span style="color: var(--danger);">*</span></label>
                <input type="text" id="teacherName" name="teacherName" required 
                       style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s;">
            </div>
            
            <div class="form-group" style="margin-bottom: 15px;">
                <label for="courseTime" style="display: block; margin-bottom: 8px; font-weight: 500; color: #4b5563;">上课时间 <span style="color: var(--danger);">*</span></label>
                <input type="text" id="courseTime" name="courseTime" placeholder="格式：周X X-X节（例如：周3 2-3节）" required 
                       style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s;">
                <small style="display: block; margin-top: 5px; color: #64748b; font-size: 0.85rem;">示例：周3 2-3节 表示周三第2-3节课</small>
            </div>
            
            <div class="form-group" style="margin-bottom: 15px;">
                <label for="location" style="display: block; margin-bottom: 8px; font-weight: 500; color: #4b5563;">上课地点 <span style="color: var(--danger);">*</span></label>
                <input type="text" id="location" name="location" required 
                       style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s;">
            </div>
            
            <div class="form-group" style="margin-bottom: 20px;">
                <label for="courseType" style="display: block; margin-bottom: 8px; font-weight: 500; color: #4b5563;">课程类型 <span style="color: var(--danger);">*</span></label>
                <select id="courseType" name="courseType" required 
                        style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s;">
                    <option value="mandatory">必修</option>
                    <option value="elective">选修</option>
                    <option value="lab">实验</option>
                    <option value="seminar">研讨</option>
                </select>
            </div>
            
            <div style="display: flex; justify-content: flex-end; gap: 15px;">
                <button type="button" id="cancelForm" class="btn" style="padding: 10px 20px; background-color: #f3f4f6; color: #4b5563; border: none;">
                    <i class="fas fa-times mr-2"></i> 取消
                </button>
                <button type="submit" class="btn" style="padding: 10px 20px; background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; border: none;">
                    <i class="fas fa-save mr-2"></i> 提交
                </button>
            </div>
        </form>
    `;

            courseFormModal.appendChild(formContainer);
            document.body.appendChild(courseFormModal);

            // 绑定关闭事件
            document.getElementById('closeModal').addEventListener('click', closeCourseForm);
            document.getElementById('cancelForm').addEventListener('click', closeCourseForm);

            // 绑定表单提交事件
            document.getElementById('courseForm').addEventListener('submit', submitCourseForm);
        }

        // 打开课程输入表单
        function openCourseInputForm() {
            // 重置表单
            resetCourseForm();

            // 设置模态框标题
            const modalTitle = document.querySelector('#courseFormModal h3');
            modalTitle.textContent = '添加新课程';
            currentEditingCourseId = null;

            // 显示模态框
            courseFormModal.style.display = 'flex';

            // 聚焦到课程名称输入框
            document.getElementById('courseTitle').focus();
        }

        // 重置课程表单
        function resetCourseForm() {
            document.getElementById('courseTitle').value = '';
            document.getElementById('teacherName').value = '';
            document.getElementById('courseTime').value = '';
            document.getElementById('location').value = '';
            document.getElementById('courseType').value = 'mandatory';
        }

        // 关闭课程表单
        function closeCourseForm() {
            courseFormModal.style.display = 'none';
        }

        // 提交课程表单
        function submitCourseForm(e) {
            e.preventDefault();

            // 获取表单数据
            const courseTitle = document.getElementById('courseTitle').value.trim();
            const teacherName = document.getElementById('teacherName').value.trim();
            const courseTime = document.getElementById('courseTime').value.trim();
            const location = document.getElementById('location').value.trim();
            const courseType = document.getElementById('courseType').value;

            // 验证课程时间格式（调整为后端需要的"周一3-4节"格式）
            const timeRegex = /^周[一二三四五六日]\d+-\d+节$/;
            if (!timeRegex.test(courseTime)) {
                showErrorToast('上课时间格式错误，请使用"周X X-X节"的格式（例如：周三 3-4节）');
                return;
            }

            // 构建课程数据（直接使用后端字段名）
            const courseData = {
                name: courseTitle,          // 对应后端name字段
                teacher: teacherName,       // 对应后端teacher字段
                time: courseTime,           // 对应后端time字段（如"周一3-4节"）
                location: location,         // 对应后端location字段
                type: courseType            // 对应后端type字段
            };

            // 提交到后端
            submitCourseToBackend(courseData);

            // 关闭表单
            closeCourseForm();
        }

        // 提交课程数据到后端
        function submitCourseToBackend(courseData) {
            // 显示加载状态
            const submitBtn = document.querySelector('#courseForm button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 提交中...';

            // 发送POST请求到后端（注意Content-Type和JSON格式）
            fetch('/api/courses', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(courseData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`后端错误：${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 后端返回成功，更新前端课程列表
                    showSuccessToast('课程添加成功');
                    console.log('课程添加成功:', data);

                    // 重新获取课程数据并渲染
                    fetchCourses();
                })
                .catch(error => {
                    console.error('提交课程失败:', error);
                    showErrorToast('提交课程失败，请稍后重试');
                })
                .finally(() => {
                    // 恢复按钮状态
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                });
        }


        // // 根据节次获取时间（与现有时间槽匹配），后端更改数据定义后不在需要
        // function getTimeFromPeriod(period) {
        //     const periodTimes = [
        //         { start: '8:00', end: '8:45' },
        //         { start: '8:55', end: '9:40' },
        //         { start: '10:10', end: '10:55' },
        //         { start: '11:05', end: '11:50' },
        //         { start: '14:30', end: '15:15' },
        //         { start: '15:25', end: '16:10' },
        //         { start: '16:40', end: '17:25' },
        //         { start: '17:35', end: '18:20' },
        //         { start: '19:10', end: '19:55' },
        //         { start: '20:05', end: '20:50' }
        //     ];

        //     return period <= periodTimes.length ? periodTimes[period - 1].start : '21:00';
        // }


        // 显示成功提示
        function showSuccessToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast success';
            toast.textContent = message;
            toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 8px;
        background-color: var(--success);
        color: white;
        box-shadow: 0 4px 12px rgba(76, 201, 240, 0.5);
        z-index: 1001;
        animation: fadeIn 0.3s ease, fadeOut 3s ease 3s;
    `;
            document.body.appendChild(toast);

            // 3秒后自动移除
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }

        // 显示错误提示
        function showErrorToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast error';
            toast.textContent = message;
            toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 8px;
        background-color: var(--danger);
        color: white;
        box-shadow: 0 4px 12px rgba(247, 37, 133, 0.5);
        z-index: 1001;
        animation: fadeIn 0.3s ease, fadeOut 3s ease 3s;
    `;
            document.body.appendChild(toast);

            // 3秒后自动移除
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }
        // 视图切换
        //切换为周视图
        weekViewBtn.addEventListener('click', () => {
            switchView('week');
        });
        //切换为日视图
        dayViewBtn.addEventListener('click', () => {
            switchView('day');

            updateDayViewHeader(); // 切换到日视图时更新顶部信息
        });
        //具体切换逻辑
        function switchView(view) {
            currentView = view;
            updateDateDisplay();

            if (view === 'week') {
                weekView.classList.remove('hidden');
                dayView.classList.add('hidden');
                weekViewBtn.classList.add('active');
                dayViewBtn.classList.remove('active');

                // 小屏幕显示移动端日期选择器
                if (window.innerWidth <= 768) {
                    mobileDaySelector.classList.remove('hidden');
                    dayHeaders.forEach(header => {
                        header.style.display = 'none';
                    });
                }
            } else {
                weekView.classList.add('hidden');
                dayView.classList.remove('hidden');
                weekViewBtn.classList.remove('active');
                dayViewBtn.classList.add('active');

                // 隐藏移动端日期选择器
                mobileDaySelector.classList.add('hidden');
                dayHeaders.forEach(header => {
                    header.style.display = 'block';
                });
            }
        }


        // 日期导航
        //向前移动
        prevBtn.addEventListener('click', () => {
            if (currentView === 'week') {//周视图的前后变动逻辑
                currentDate.setDate(currentDate.getDate() - 7);
            } else {//日视图的前后变动逻辑
                currentDate.setDate(currentDate.getDate() - 1);
            }
            updateDateDisplay();
            renderWeekView();
            renderDayView();
        });
        //向后移动
        nextBtn.addEventListener('click', () => {
            if (currentView === 'week') {
                currentDate.setDate(currentDate.getDate() + 7);
            } else {
                currentDate.setDate(currentDate.getDate() + 1);
            }
            updateDateDisplay();
            renderWeekView();
            renderDayView();
        });

        // 查询相关
        // 初始化查询功能
        function initQueryFunction() {
            // 查询按钮事件
            queryBtn.addEventListener('click', performSearch);

            // 支持按回车键查询
            keywordInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });

            // 关闭结果按钮事件
            closeResults.addEventListener('click', () => {
                resultsSection.style.display = 'none';
            });
        }

        // 执行查询
        function performSearch() {
            const query = keywordInput.value.trim().toLowerCase();
            const type = queryType.value;

            if (!type) {
                alert('请选择查询类型');
                return;
            }

            if (!query) {
                alert('请输入查询关键词');
                return;
            }

            const results = courses.filter(course => {
                if (type === 'name') {
                    return course.title.toLowerCase().includes(query);
                } else if (type === 'teacher') {
                    return course.teacher.toLowerCase().includes(query);
                }
                return false;
            });

            showResults(results);
        }

        // 显示查询结果
        function showResults(results) {
            resultsContainer.innerHTML = '';

            if (results.length === 0) {
                resultsContainer.innerHTML = `
                    <div class="empty-results">
                        <i class="fas fa-search"></i>
                        <h3>未找到匹配的课程</h3>
                        <p>请尝试其他关键词或查询条件</p>
                    </div>
                `;
            } else {
                results.forEach(course => {
                    const resultCard = createResultCard(course);
                    resultsContainer.appendChild(resultCard);
                });
            }

            // 显示结果区域
            resultsSection.style.display = 'block';

            // 滚动到结果区域
            resultsSection.scrollIntoView({ behavior: 'smooth' });
        }

        // 创建结果卡片
        function createResultCard(course) {
            const card = document.createElement('div');
            card.className = `result-card ${course.type}`;

            const typeName = getTypeName(course.type);
            const dayName = getDayName(course.day);

            card.innerHTML = `
                <div class="course-type">${typeName}</div>
                <h3 class="result-title">${course.title}</h3>
                <div class="result-info">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <span>教师: ${course.teacher}</span>
                </div>
                <div class="result-info">
                    <i class="fas fa-calendar-day"></i>
                    <span>时间: ${dayName} ${course.start} - ${course.end}</span>
                </div>
                <div class="result-info">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>地点: ${course.location}</span>
                </div>
                <div class="result-info">
                    <i class="fas fa-book"></i>
                    <span>类型: ${typeName}</span>
                </div>
            `;

            return card;
        }

        // 获取星期名称
        function getDayName(dayIndex) {
            const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
            return days[dayIndex] || '未知';
        }

        // 
        // // 移动端日期选择
        // mobileDays.forEach(day => {
        //     day.addEventListener('click', () => {
        //         document.querySelector('.mobile-day.active').classList.remove('active');
        //         day.classList.add('active');
        //         currentDay = parseInt(day.getAttribute('data-day'));
        //         renderWeekView();
        //     });
        // });

        // 更新日期显示
        function updateDateDisplay() {
            if (currentView === 'week') {
                // 计算本周一（开始日期）和本周日（结束日期）
                const startDate = new Date(currentDate);
                const dayOfWeek = startDate.getDay(); // 0（周日）到 6（周六）
                const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
                startDate.setDate(startDate.getDate() + diffToMonday);

                const endDate = new Date(startDate);
                endDate.setDate(endDate.getDate() + 6);

                dateDisplay.textContent = `${formatDate(startDate)} - ${formatDate(endDate)}`;

                // 更新周一到周日的日期显示
                const today = new Date();
                today.setHours(0, 0, 0, 0); // 清除时间部分

                for (let i = 0; i < 7; i++) {
                    const date = new Date(startDate);
                    date.setDate(startDate.getDate() + i);
                    const monthDay = formatMonthDay(date);

                    // 更新日期文本
                    const dateText = dayHeaders[i].querySelector('.date-text');
                    if (dateText) {
                        dateText.textContent = monthDay;
                    }

                    // 判断是否是今天
                    const dateForCompare = new Date(date);
                    dateForCompare.setHours(0, 0, 0, 0);
                    if (dateForCompare.getTime() === today.getTime()) {
                        dayHeaders[i].classList.add('today');
                    } else {
                        dayHeaders[i].classList.remove('today');
                    }
                }
            } else {
                dateDisplay.textContent = formatDate(currentDate);
                updateDayViewHeader(); // 确保日视图顶部信息更新

            }
        }


        // 更新日视图顶部信息
        function updateDayViewHeader() {
            const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            const dayIndex = currentDate.getDay();

            currentWeekday.textContent = weekdays[dayIndex];
            currentFullDate.textContent = formatDate(currentDate);
        }
        // 格式化日期
        function formatMonthDay(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
        }
        function formatDate(date) {
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            return `${year}年${month}月${day}日`;
        }

        // 将时间字符串转换为分钟数
        function timeToMinutes(time) {
            const [hours, minutes] = time.split(':').map(Number);
            return hours * 60 + minutes;
        }
        // 计算课程跨越的时间槽数量
        function calculateTimeSlotSpan(course) {
            const courseStart = timeToMinutes(course.start);
            const courseEnd = timeToMinutes(course.end);

            let startSlotIndex = -1;
            let endSlotIndex = -1;

            // 找到课程开始和结束时间所在的时间槽
            timeSlots.forEach((slot, index) => {
                const slotStart = timeToMinutes(slot.start);
                const slotEnd = timeToMinutes(slot.end);

                if (courseStart >= slotStart && courseStart < slotEnd) {
                    startSlotIndex = index;
                }

                if (courseEnd > slotStart && courseEnd <= slotEnd) {
                    endSlotIndex = index;
                }
            });

            // 如果课程跨越多个时间槽
            if (startSlotIndex !== -1 && endSlotIndex !== -1) {
                return {
                    startIndex: startSlotIndex,
                    span: endSlotIndex - startSlotIndex + 1
                };
            }

            // 默认返回单个时间槽
            return {
                startIndex: startSlotIndex !== -1 ? startSlotIndex : 0,
                span: 1
            };
        }

        // 渲染周视图
        function renderWeekView() {

            // 清除现有课程
            document.querySelectorAll('.day-column').forEach(column => {
                column.innerHTML = '';
            });

            // 添加课程
            courses.forEach(course => {
                // 获取课程对应的星期（data-day）
                const courseDay = course.day; // 0-6（周一到周日）

                // 获取课程跨越的所有时间槽索引（data-time数组）
                const slotIndexes = getTimeSlotIndexes(course);

                // 异常处理：跳过无匹配时间槽的课程
                if (slotIndexes.length === 0) {
                    console.warn(`课程《${course.title}》时间${course.start}-${course.end}不在任何时间槽内`);
                    return;
                }
                slotIndexes.forEach((timeIndex, slotOrder) => {
                    // 找到当前时间槽对应的DOM元素（匹配data-day和data-time）
                    const targetColumn = document.querySelector(
                        `.day-column[data-day="${courseDay}"][data-time="${timeIndex}"]`
                    );

                    // 异常处理：跳过不存在的时间槽元素
                    if (!targetColumn) {
                        console.warn(`未找到时间槽元素：星期${courseDay}，时间槽${timeIndex}`);
                        return;
                    }

                    // 4. 创建课程元素（根据是否为第一个槽显示不同样式）
                    const courseElement = createCourseElement(course);

                    // 第一个时间槽显示完整信息，后续槽显示简化样式
                    if (slotOrder !== 0) {
                        courseElement.classList.add('course-continuation');
                    }

                    // 5. 将课程元素添加到目标时间槽
                    targetColumn.appendChild(courseElement);
                });
            });

            // 添加空课程提示
            document.querySelectorAll('.day-column').forEach(column => {
                if (column.children.length === 0) {
                    const emptySlot = document.createElement('div');
                    emptySlot.className = 'empty-slot';
                    emptySlot.innerHTML = '<i class="fas fa-coffee"></i><br>无课程安排';
                    column.appendChild(emptySlot);
                }
            });

        }

        // 计算课程跨越的所有时间槽索引（返回data-time数组）
        function getTimeSlotIndexes(course) {
            // 将课程开始/结束时间转换为分钟数
            const courseStartMinutes = timeToMinutes(course.start);
            const courseEndMinutes = timeToMinutes(course.end);
            const slotIndexes = [];

            // 遍历所有时间槽，判断课程是否与当前槽重叠
            timeSlots.forEach((slot, index) => {
                const slotStartMinutes = timeToMinutes(slot.start);
                const slotEndMinutes = timeToMinutes(slot.end);

                // 重叠条件：课程开始时间 < 槽结束时间 且 课程结束时间 > 槽开始时间
                // （只要有交集，就计入该时间槽）
                if (courseStartMinutes < slotEndMinutes && courseEndMinutes > slotStartMinutes) {
                    slotIndexes.push(index);
                }
            });

            return slotIndexes;
        }


        // 渲染日视图
        function renderDayView() {
            // 清除现有课程
            const coursesColumn = document.querySelector('.courses-column');
            coursesColumn.innerHTML = '';

            // 获取当前日期的星期几 (0-6, 0为周日)
            const dayOfWeek = currentDate.getDay();
            // 调整到周一到周日 (1-7)
            const adjustedDay = dayOfWeek === 0 ? 6 : dayOfWeek - 1;

            // 添加课程
            courses.forEach(course => {
                if (course.day === adjustedDay) {
                    const timeSlotInfo = calculateTimeSlotSpan(course);

                    const courseElement = createCourseElement(course);
                    // 设置课程卡片在网格中的位置
                    courseElement.style.gridRow = `${timeSlotInfo.startIndex + 1} / span ${timeSlotInfo.span}`;

                    coursesColumn.appendChild(courseElement);
                }
            });

            // 添加空课程提示
            if (coursesColumn.children.length === 0) {
                const emptySlot = document.createElement('div');
                emptySlot.className = 'empty-slot';
                emptySlot.style.gridRow = '1 / -1';
                emptySlot.innerHTML = '<i class="fas fa-coffee"></i><br>今日无课程安排';
                coursesColumn.appendChild(emptySlot);
            }

            //updateDateDisplay();
        }

        // 创建课程元素
        function createCourseElement(course) {
            const courseElement = document.createElement('div');
            courseElement.className = `course-card ${course.type}`;

            const duration = course.end - course.start;
            courseElement.style.gridRow = `span ${duration}`;

            courseElement.innerHTML = `
                <div class="course-type">${getTypeName(course.type)}</div>
                <div class="course-title">${course.title}</div>
                <div class="course-info">${course.start} - ${course.end}</div>
                <div class="course-info">${course.teacher}</div>
                <div class="course-location">
                <i class="fas fa-map-marker-alt"></i> ${course.location}
                </div>
            `;

            return courseElement;
        }

        // 获取课程类型名称
        function getTypeName(type) {
            switch (type) {
                case 'mandatory': return '必修';
                case 'elective': return '选修';
                case 'lab': return '实验';
                case 'seminar': return '研讨';
                default: return '课程';
            }
        }

        // 高亮显示当前时间
        function highlightCurrentTime() {
            const now = new Date();
            const currentHour = now.getHours();

            // 周视图高亮当前所在日期
            const dayColumns = document.querySelectorAll('.day-column');
            dayColumns.forEach(column => {
                const day = parseInt(column.getAttribute('data-day'));
                if (day === now.getDay() - 1 || (now.getDay() === 0 && day === 6)) {
                    column.classList.add('current-time');
                }
            });

            // 日视图高亮当前所在时间槽
            if (currentView == 'day') {
                let highlighted = false;
                for (let i = 0; i < timeSlots.length; i++) {
                    const slot = timeSlots[i];
                    const slotTime = slot.dataset.time;
                    const [slotHour, slotMinute] = slotTime.split(':').map(Number);
                    const slotTotalMinutes = slotHour * 60 + slotMinute;

                    // 计算当前时间槽的时间段结束点
                    let nextTotalMinutes;

                    if (i < timeSlots.length - 1) {
                        // 普通时间槽：结束点为下一个时间槽开始时间
                        const nextSlotTime = timeSlots[i + 1].dataset.time;
                        const [nextHour, nextMinute] = nextSlotTime.split(':').map(Number);
                        nextTotalMinutes = nextHour * 60 + nextMinute;
                    } else {
                        // 最后一个时间槽：结束点为21:45 (45分钟后)
                        nextTotalMinutes = slotTotalMinutes + 45;
                    }

                    // 检查当前时间是否在时间段内
                    if (nowTotalMinutes >= slotTotalMinutes &&
                        nowTotalMinutes < nextTotalMinutes) {
                        // 高亮整行
                        slot.parentElement.classList.add('current-time');

                        // 更新显示的时间段
                        if (i < timeSlots.length - 1) {
                            document.getElementById('highlightedPeriod').textContent =
                                `${slotTime} - ${timeSlots[i + 1].dataset.time}`;
                        } else {
                            document.getElementById('highlightedPeriod').textContent =
                                `${slotTime} - 21:45`;
                        }

                        //    highlighted = true;
                        break;
                    }
                }
            }

        }
        // 7.7
        // 应用背景图片
        function applyBackgroundImage() {
            const savedBg = localStorage.getItem('scheduleBgImage');
            const body = document.body;
            
            if (savedBg) {
                // 设置背景图片
                body.style.backgroundImage = `url(${savedBg})`;
                body.style.backgroundSize = 'cover'; // 覆盖整个背景
                body.style.backgroundPosition = 'center'; // 居中显示
                body.style.backgroundAttachment = 'fixed'; // 固定背景，不随滚动移动
                
                // 根据深色模式添加遮罩，确保文字可读性
                if (document.body.classList.contains('dark-mode')) {
                    body.style.backgroundBlendMode = 'overlay';
                    body.style.backgroundColor = 'rgba(30, 41, 59, 0.85)'; // 深色半透明遮罩
                } else {
                    body.style.backgroundBlendMode = 'normal';
                    body.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; // 浅色半透明遮罩
                }
            } else {
                // 未设置背景图片时恢复默认渐变
                body.style.backgroundImage = 'linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%)';
                body.style.backgroundSize = 'auto';
                body.style.backgroundPosition = 'initial';
                body.style.backgroundAttachment = 'initial';
                body.style.backgroundBlendMode = 'normal';
                body.style.backgroundColor = 'transparent';
            }
        }

        // 深色模式切换时重新适配背景
        function handleDarkModeChange() {
            // 假设切换深色模式的函数中添加：
            applyBackgroundImage();
        }

        // 页面加载时应用背景
        document.addEventListener('DOMContentLoaded', function() {
            applyBackgroundImage();
            // 其他初始化逻辑...
            
            // 监听深色模式切换（如果有切换按钮）
            const themeToggle = document.getElementById('themeToggle'); // 假设有此元素
            if (themeToggle) {
                themeToggle.addEventListener('change', handleDarkModeChange);
            }
        });
        // 7.7
        // 初始化显示
        updateDateDisplay();

    </script>
</body>

</html>